<template>
  <div class="report-container">
    <!-- 1. 顶部标题和核心发现 (无变化) -->
    <header class="main-header">
      <div class="icon-wrapper">
        <v-icon size="32" color="#0d47a1">mdi-chart-line</v-icon>
        <span class="header-pre-title">印尼汽车市场竞品分析</span>
      </div>
      <h1 class="main-title">印尼新能源/内燃汽车市场竞品分析</h1>
      <div class="core-finding">
        核心发现：3万-3.5万USD价格区间的7座新能源MPV车型存在完全市场空白
      </div>
    </header>

    <!-- 2. 市场空白结论 (无变化) -->
    <v-card class="report-card" flat>
      <v-card-title class="card-title">
        <v-icon class="mr-2" color="#1976D2">mdi-lightbulb-on-outline</v-icon>
        市场空白结论
      </v-card-title>
      <v-card-text>
        <div class="conclusion-box">
          <p><strong>核心表现:</strong></p>
          <p>在3万-3.5万USD价格区间内，<strong>7座新能源MPV车型存在完全市场空白</strong>。当前市场中：</p>
          <ul>
            <li>新能源车型多为SUV或价格已超3.5万USD</li>
            <li>7座MPV以内燃机车为主，新能源选择缺失</li>
            <li>续航500km+的7座新能源车型价格均超4万USD</li>
          </ul>
        </div>
      </v-card-text>
    </v-card>

    <!-- 3. 竞争产品分析表 (无变化) -->
    <v-card class="report-card" flat>
      <v-card-title class="card-title">
        <v-icon class="mr-2" color="#1976D2">mdi-format-list-bulleted-square</v-icon>
        竞争产品分析表 (12款车型)
      </v-card-title>
      <v-card-text>
        <v-table class="competitor-table">
          <thead>
          <tr>
            <th>类型</th><th>品牌</th><th>车型</th><th>车型类型</th><th>座位数</th><th>续航(km)</th><th>价格(USD)</th><th>核心配置</th><th>劣势</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, i) in competitors" :key="i" :class="{'new-energy-row': item.type === '新能源'}">
            <td><v-chip :color="item.type === '新能源' ? 'green' : 'grey'" density="compact" label>{{ item.type }}</v-chip></td>
            <td>{{ item.brand }}</td><td>{{ item.model }}</td><td>{{ item.modelType }}</td><td>{{ item.seats }}</td><td>{{ item.range }}</td>
            <td>{{ item.price.toLocaleString() }}</td> <!-- 使用 toLocaleString() 自动添加逗号 -->
            <td>{{ item.config }}</td><td>{{ item.disadvantage }}</td>
          </tr>
          </tbody>
        </v-table>
      </v-card-text>
    </v-card>

    <!-- 4. 空白市场可视化分析 (无变化) -->
    <v-card class="report-card" flat>
      <v-card-title class="card-title">
        <v-icon class="mr-2" color="#1976D2">mdi-chart-scatter-plot</v-icon>
        空白市场可视化分析
      </v-card-title>
      <v-card-text>
        <BubbleChart :chart-data="bubbleChartData" />
        <v-alert density="compact" variant="tonal" color="blue-grey" class="mt-4">
          <h4 class="alert-title">图表维度：</h4>
          <ul>
            <li>X轴：价格（USD）</li>
            <li>Y轴：续航里程（km），内燃车显示在"NA"</li>
            <li>气泡颜色：新能源车型（蓝色）/ 内燃车（绿色）</li>
            <li>气泡大小：代表2025年上半年销量占比</li>
          </ul>
        </v-alert>
        <v-alert density="compact" variant="tonal" color="red" class="mt-4">
          <h4 class="alert-title">图表结论：</h4>
          在价格3万-3.5万USD、续航500km+的理想区域内，缺少新能源数据点，确认市场空白。
        </v-alert>
      </v-card-text>
    </v-card>

    <!-- 5. 目标市场匹配度 (无变化) -->
    <v-card class="report-card" flat>
      <v-card-title class="card-title">
        <v-icon class="mr-2" color="#1976D2">mdi-bullseye-arrow</v-icon>
        目标市场匹配度 (IKN高净值家庭)
      </v-card-title>
      <v-card-text>
        <v-table class="matching-table">
          <thead>
          <tr>
            <th>需求指标</th><th>IKN高净值家庭特征</th><th>空白市场契合度</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, i) in matchingData" :key="i">
            <td class="indicator-cell">{{ item.metric }}</td>
            <td>{{ item.feature }}</td>
            <td :class="{'perfect-match-cell': item.match.includes('100%')}">{{ item.match }}</td>
          </tr>
          </tbody>
        </v-table>
      </v-card-text>
    </v-card>
  </div>
</template>

<script setup>
import {computed} from "vue";
import BubbleChart from '@/components/BubbleChart.vue';

// 关键改动 1: 为每个车型添加 salesProxy 字段，并修正价格格式
const competitors = [
  {
    type: '新能源',
    brand: '比亚迪',
    model: '唐 EV',
    modelType: 'SUV',
    seats: '7座',
    range: '635',
    price: 32000,
    config: 'L3级智驾、VTOL移动电站',
    disadvantage: '非MPV车型，第三排空间局促',
    salesProxy: 20
  },
  {
    type: '新能源',
    brand: '吉利',
    model: '几何 G60',
    modelType: 'SUV',
    seats: '7座',
    range: '550',
    price: 34800,
    config: '全域LSS芯片、座椅通风+加热',
    disadvantage: '2025年Q3量产，品牌认知度低',
    salesProxy: 12
  },
  {
    type: '新能源',
    brand: '腾势',
    model: 'D9 EV',
    modelType: 'MPV',
    seats: '7座',
    range: '600',
    price: 45000,
    config: '双侧电动滑门、车载冰箱',
    disadvantage: '价格超区间30%，定位高端商务',
    salesProxy: 8
  },
  {
    type: '新能源',
    brand: '五菱',
    model: '缤果7座概念车',
    modelType: 'MPV',
    seats: '7座',
    range: '450',
    price: 22000,
    config: '侧滑门、IP67电池防水',
    disadvantage: '未量产，续航未达500km',
    salesProxy: 18
  },
  {
    type: '内燃车',
    brand: '丰田',
    model: 'Innova Crysta',
    modelType: 'MPV',
    seats: '7座',
    range: '-',
    price: 33500,
    config: '3.0L柴油发动机、四驱系统',
    disadvantage: '油耗高(10L/100km)，无新能源政策',
    salesProxy: 40
  },
  {
    type: '内燃车',
    brand: '本田',
    model: 'Odyssey',
    modelType: 'MPV',
    seats: '7座',
    range: '-',
    price: 34800,
    config: 'I-MMD混动系统、魔术座椅',
    disadvantage: '非纯电车型，价格接近区间上限',
    salesProxy: 25
  },
  {
    type: '内燃车',
    brand: '三菱',
    model: 'Pajero Sport',
    modelType: 'SUV',
    seats: '7座',
    range: '-',
    price: 32800,
    config: '超选四驱、后桥差速锁',
    disadvantage: '配置老旧，内饰塑料感强',
    salesProxy: 35
  },
  {
    type: '内燃车',
    brand: '日产',
    model: 'Terra',
    modelType: 'SUV',
    seats: '7座',
    range: '-',
    price: 34200,
    config: '智能四驱、Nissan Safety Shield',
    disadvantage: '第三排腿部空间不足2拳',
    salesProxy: 15
  },
  {
    type: '内燃车',
    brand: '现代',
    model: 'Staria',
    modelType: 'MPV',
    seats: '7座',
    range: '-',
    price: 34900,
    config: '10.25英寸中控屏、双侧滑门',
    disadvantage: '价格超区间上限100 USD',
    salesProxy: 20
  },
  {
    type: '内燃车',
    brand: '铃木',
    model: 'XL7',
    modelType: 'SUV',
    seats: '7座',
    range: '-',
    price: 31200,
    config: '轻度混合动力、全景天窗',
    disadvantage: 'SUV车身设计，第三排头部空间压抑',
    salesProxy: 28
  },
  {
    type: '内燃车',
    brand: '马自达',
    model: 'CX-8',
    modelType: 'SUV',
    seats: '7座',
    range: '-',
    price: 34500,
    config: '创驰蓝天技术、BOSE音响',
    disadvantage: '第三排仅适合儿童，非MPV车型',
    salesProxy: 10
  },
  {
    type: '内燃车',
    brand: '起亚',
    model: 'Carnival',
    modelType: 'MPV',
    seats: '7座',
    range: '-',
    price: 34700,
    config: '12.3英寸双联屏、后排娱乐系统',
    disadvantage: '燃油经济性差，排放较高',
    salesProxy: 18
  },
];

const matchingData = [
  {metric: '预算范围', feature: '3万-3.5万USD', match: '100%匹配'},
  {metric: '座位需求', feature: '7座 (多孩家庭占比78%)', match: '100%匹配'},
  {metric: '能源类型', feature: '新能源偏好 (环保意识指数68)', match: '100%匹配'},
  {metric: '功能需求', feature: 'MPV车型 (家庭出行场景)', match: '100%匹配'},
  {metric: '政策敏感性', feature: '免税政策利用率92%', match: '价格优势显著'},
];

// 关键改动 2: bubbleChartData 的逻辑是正确的，现在有了正确的数据源
const bubbleChartData = computed(() => {
  const newEnergyData = [];
  const iceData = [];

  competitors.forEach(car => {
    // 数据格式: [价格, 续航, 销量代理, 车型名称]
    const price = car.price; // 直接使用数字
    const sales = car.salesProxy || 10;

    if (car.type === '新能源') {
      const range = parseFloat(car.range) || 0;
      newEnergyData.push([price, range, sales, car.model]);
    } else {
      iceData.push([price, 0, sales, car.model]);
    }
  });

  return {newEnergyData, iceData};
});
</script>

<style scoped>
.report-container {
  background-color: #ffffff;
  padding: 32px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.main-header {
  text-align: center;
  margin-bottom: 32px;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.header-pre-title {
  font-size: 14px;
  color: #5a6a8a;
  font-weight: 500;
}

.main-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a2b4e;
  margin-bottom: 16px;
}

.core-finding {
  background-color: #0d47a1;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
}

.report-card {
  border: 1px solid #e0e6f1;
  border-radius: 12px;
  margin-bottom: 32px;
  overflow: hidden;
}

.card-title {
  color: #1976D2;
  font-weight: 600;
  font-size: 1.2rem;
}

.conclusion-box {
  background-color: #e3f2fd;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #1976D2;
  color: #0d47a1;
}

.conclusion-box ul {
  padding-left: 20px;
}

.competitor-table, .matching-table {
  width: 100%;
  border-collapse: collapse;
}

.competitor-table th, .matching-table th, .competitor-table td, .matching-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e0e6f1;
  text-align: left;
}

.competitor-table thead, .matching-table thead {
  background-color: #f4f7fc;
}

.competitor-table th, .matching-table th {
  font-weight: 600;
  color: #3c4d6f;
}

.new-energy-row {
  background-color: #e8f5e9;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.indicator-cell {
  font-weight: 500;
}

.perfect-match-cell {
  background-color: #bbdefb;
  color: #0d47a1;
  font-weight: bold;
  text-align: center;
}
</style>